<!--
 * @Author: 宋杰
 * @Date: 2021-01-12 20:54:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-15 00:54:59
 * @Description: 一家十一口(猜一字) 第三行 左下图
-->
<template>
  <div>
    <div id="upperleft" style="width:95%; height: 95%;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chart: null,
      itemWidth: null,
      itemHeight: null,
      axisData: null,
      // 图表的配置
      option: {
        title: {},
        color: ["#31A5DE", "#F44765", "#31A5DE", "#F44765"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56",
            },
          },
        },
        legend: {
          left: "10%",
          data: ["自营过件率", "平台过件率", "自营不良率", "平台不良率"],
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100,
        },
        xAxis: [
          {
            type: "category",
            splitLine: { show: false }, //去除网格线
            boundaryGap: true,
            data: (function() {
              var now = new Date();
              var res = [];
              var len = 10;
              while (len--) {
                res.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
                now = new Date(now - 2000);
              }
              return res;
            })(),
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            // name: "不良率",
            max : 100,
            min : 0,
            splitNumber : 10,
            boundaryGap : [ 0.2, 0.2 ],
            axisLabel: {
              // formatter: function(value) {
              //   return value.toFixed(2) + "%";
              // },
            },
            nameTextStyle: {
              color: "rgba(250,250,250, 0.5)",
              fontWeight: "bold",
              align: "right",
            },
            splitLine: { show: false }, //去除网格线
          },
          {
            type: "value",
            scale: true,
            // name: "预购量",
            max : 100,
            min : 0,
            splitNumber : 10,
            boundaryGap: [0.2, 0.2],
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "自营过件率",
            type: "bar",
            barWidth: "20%", //柱图宽度
            data: [20, 30, 70, 60, 30, 30, 20, 80, 90],
          },
          {
            name: "平台过件率",
            type: "bar",
            barWidth: "20%", //柱图宽度
            data: [20, 80, 70, 60, 20, 30, 50, 80, 60],
          },

          {
            name: "自营不良率",
            type: "line",
            smooth: true,
            data: [20, 50, 70, 60, 30, 30, 20, 80, 90],
            label: {
              show: true,
              formatter: "{c}%",
            },
          },
          {
            name: "平台不良率",
            type: "line",
            smooth: true,
            data: [20, 80, 70, 60, 20, 30, 50, 80, 60],
            label: {
              show: true,
              formatter: "{c}%",
            },
          },
        ],
      },
    };
  },
  created() {
    this.widthA();
    // this.setInterval();
  },
  mounted() {
    this.draw();
  },
  methods: {
    //文字随着屏幕的大小变化
    widthA() {
      var width = window.innerWidth;
      // 最小1366px，最大适配2560px
      if (width <= 1366) {
        this.itemWidth = 14;
        this.itemHeight = 7;
      } else if (1366 < width && width < 1681) {
        this.itemWidth = 18;
        this.itemHeight = 9;
      } else if (1680 < width && width < 1921) {
        this.itemWidth = 22;
        this.itemHeight = 11;
      } else if (1920 < width && width < 2561) {
        this.itemWidth = 26;
        this.itemHeight = 13;
      }
    },
    draw() {
      this.chart = this.$echarts.init(document.getElementById("upperleft"));
      this.chart.setOption(this.option);
    },
    // setInterval() {
    //   this.axisData = new Date().toLocaleTimeString().replace(/^\D*/, "");

    //   var data0 = this.option.series[0].data;
    //   var data1 = this.option.series[1].data;
    //   var data2 = this.option.series[2].data;
    //   data0.shift();
    //   data0.push(Math.round(Math.random() * 1000));
    //   data1.shift();
    //   data1.push(Math.round(Math.random() * 1000));
    //   data2.shift();
    //   data2.push((Math.random() * 10 + 5).toFixed(1) - 0);

    //   this.option.xAxis[0].data.shift();
    //   this.option.xAxis[0].data.push(this.axisData);
    // },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped></style>
